<template>
  <div>
      <el-card class="box-card" v-for="(item,index) in goodsLineSteps" :key="index">
        <div style="overflow: hidden">
          <div class="img-title">
            {{ item.goodsLineName }}
            <el-button type="text" style="float:right;" size="mini" @click="showZQ(item)">设置开发周期</el-button>
          </div>
          <div class="progress-img">
            <div style="padding:20px;margin-top:30px;">
              <el-progress type="dashboard" :percentage="item | fifpercentage(steps)" :width="200" :stroke-width="14"></el-progress>
              <div style="font-size:12px;text-align: center;width:200px;margin-top:-10px">
                当前进度：{{ item['stepList'][item.developState/10 -1] ? item['stepList'][item.developState/10 -1]['itemTitle'] : '--'}}
              </div>
            </div>
          </div>
          <div class="progress-table-div">
            <table class="progress-table" cellspacing="0" cellpadding="0" border="0">
              <tr>
                <td class="table-title blure" >开发阶段</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps">{{ ee.itemTitle }}</td>
              </tr>
              <tr>
                <td class="table-title blure">建议完成时间</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps">{{item['stepList'][ii]['itemValue1']}}</td>
              </tr>
              <tr>
                <td class="table-title blure">预计完成时间</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps"> {{item['stepList'][ii]['itemValue2']}}</td>
              </tr>
              <tr>
                <td class="table-title blure">实际完成时间</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps"> {{item['stepList'][ii]['itemValue3']}}</td>
              </tr>
              <tr>
                <td class="table-title blure">状态</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps"> {{item['stepList'][ii]['state'] == 1  ? '已完成' : '未完成'}} </td>
              </tr>
              <tr>
                <td class="table-title blure">状态备注</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps"> {{item['stepList'][ii]['itemValue4'] ? item['stepList'][ii]['itemValue4'] : ''}}  {{item['stepList'][ii]['itemValue5'] ? item['stepList'][ii]['itemValue5'] : ''}} </td>
              </tr>
              <tr>
                <td class="table-title blure">操作</td>
                <td class="table-title" :class="{'complete' : item['stepList'][ii]['state'] == 1}" v-for="(ee,ii) in steps">
                    <el-button size="mini" type="success" plain round style="padding:5px 10px;font-size:12px;" v-if="item['stepList'][ii]['itemCode'] == 'people'" @click="showLxr(item)">更新联系人</el-button>
                    <el-button size="mini" type="success" plain round style="padding:5px 10px;font-size:12px;" v-if="item['stepList'][ii]['itemCode'] == 'demand'" @click="showGoodsLine(item)">更新产品线</el-button>
                    <el-button size="mini" type="success" plain round style="padding:5px 10px;font-size:12px;" v-if="item['stepList'][ii]['itemCode'] == 'relation'" @click="showLD(item)">确认粘度</el-button>
                    <el-button size="mini" type="success" plain round style="padding:5px 10px;font-size:12px;" v-if="item['stepList'][ii]['itemCode'] == 'deal'" @click="showCJ(item)">确认促成交</el-button>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-card>
      <addProgress ref="addProgress" @getSteps="getSteps"></addProgress>
      <addViscosity ref="addViscosity" @getSteps="getSteps"></addViscosity>
      <addDeal ref="addDeal" @getSteps="getSteps"></addDeal>
      <addGoodsLine ref="addGoodsLine" @getList="getSteps"></addGoodsLine>

      <el-dialog title="联系人" :visible.sync="dialogVisible" width="1100px" @close="closeDialog" custom-class="customPOP">
         <customerLxr ref="customerLxr"></customerLxr>
      </el-dialog>
  </div>

</template>
<script>
import {customerNewCycleList,customerNewBaseInfo} from '@/api/company'
import { mapGetters } from 'vuex'
import addProgress from './addProgress'
import addViscosity from './addViscosity'
import addDeal from './addDeal'
import addGoodsLine from './addGoodsLine'
import customerLxr from './customerLxr'
export default {
  name: "customerProgress",
  data(){

    return {
      customerId:'',
      goodsLineSteps:[],
      steps:[],
      info:{},
      dialogVisible:false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {
    addProgress,addViscosity,addDeal,addGoodsLine,customerLxr
  },
  created() {

  },
  filters: {
    fifpercentage(item,list){
      if(item.developState != 10){
        if(item.developState == 40){
            if(item.stepList[list.length-1]['state'] == 1){ //促成交已完成
              return 100
            }else{
              return 80
            }
        }else{
          return parseInt(item.developState/10/(list.length + 1) * 100)
        }

      }else{
        return  0
      }
    },
  },
  methods:{
    init(customerId){
      this.customerId = customerId;
      this.getSteps();
      this.getInfo();
    },

    //获取客户基本信息
    getInfo(){
      customerNewBaseInfo({customerId:this.customerId}).then((res)=>{
        this.info = res
      })
    },

    //显示联系产品线
    showLxr(item){
      this.dialogVisible = true;
      setTimeout(()=>{
        this.$refs.customerLxr.init(this.customerId,item.cglId,item.goodsLineId)
      },300)

    },

    //关闭联系人
    closeDialog(){
      this.dialogVisible = false;
      this.getSteps()
    },

    showGoodsLine(item){
      let data = {}
      data.customerId = this.customerId
      data.customerName = this.info.customerName
      data.cglId = item.cglId
      this.$refs.addGoodsLine.showPop('edit',data)
    },

    //获取产品线进度
    getSteps(){
      customerNewCycleList({customerId:this.customerId,cglId:0,isMy:1}).then((res)=>{
         this.goodsLineSteps = res;
         this.steps = res[0] ? res[0]['stepList'] : [];
      })
    },
    showZQ(item){
      this.$refs.addProgress.showPop(item);
    },
    showLD(item){
      this.$refs.addViscosity.showPop(item);
    },
    showCJ(item){
      this.$refs.addDeal.showPop(item);
    },
  },
}
</script>

<style lang="scss">
    .progress-img{
      .img-title{
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
        height:40px;
      }
      width:300px;
      float:left;
    }
    .progress-table-div{
      width:calc(100% - 300px);
      float:left;
      padding:20px ;
      .progress-table{
        width:100%;
        border-left:1px solid #DCDFE6;
        border-bottom:1px solid #DCDFE6;
        font-size:12px;
        td{
          border-right:1px solid #DCDFE6;
          border-top:1px solid #DCDFE6;
          padding:10px 10px ;
          width:20%
        }
        .table-title{
          background: #f5f7fa;
          text-align: center;
        }
        .table-title.complete{
            background: #67c23a;
            color:#fff;
        }
        .table-title.blure{
            background: #409eff;
            color:#fff;
        }

      }
    }
    .customPOP .el-dialog__body{
      padding:0
    }
</style>
